<template>
  <div class="diskInfoWrap">
    <el-form
            :model="searchParams"
            size="small"
            label-width="120px"
            :class="dateWidth ? 'gt1200':'lt1200'"
        >
        
            <el-row>
                <el-col :span="6">
                    <el-form-item label="红字确认单编号：">
                        <el-input
                            v-model="searchParams.hzfpxxqrdbh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="红字确认单状态：" label-width="120px">
                      <dict-select v-model="searchParams.hzqrxxztdm" :dict-code="DictCode.VMS_HZQRXXZT" style="width: 100%"></dict-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="红字确认单申请日期：" label-width="140px">
                                <el-date-picker
                                    v-model="selectDate"
                                    type="daterange"
                                    align="right"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    >
                                </el-date-picker>

                        </el-form-item>
                </el-col>


            </el-row>

            <el-row>
                <el-col :span="6">
                    <el-form-item label="蓝字发票号码：">
                        <el-input
                            v-model="searchParams.lzfphm"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="红冲原因：" label-width="120px">
                        <el-select
                            v-model="searchParams.chyydm"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in [
                                    { label: '开票有误', value: '01' },
                                    { label: '销货退回', value: '02' },
                                    { label: '服务中止', value: '03' },
                                    { label: '销售折让', value: '04' },
                                ]"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="蓝字发票开票日期：" label-width="140px">
                        <el-date-picker
                                    v-model="selectDate2"
                                    type="daterange"
                                    align="right"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    >
                                </el-date-picker>
                    </el-form-item>
                </el-col>


            </el-row>
            <el-row>
                <el-col :span="24">
                    <div style="float: left;margin: 4px 0">
                            <el-button
                                type="primary"
                                size="small"
                                @click="uploadSelected"
                                v-if="hasAuth('VMS_FULL_HZQRD_CONFIRM_SAVE')"
                            >
                                新增
                            </el-button>
                            <el-button type="primary" @click="revokeRedInvoice" icon="el-icon-upload" size="small" v-if="hasAuth('VMS_FULL_HZQRD_CONFIRM_REVOKE')">
                                撤销
                            </el-button>
                    </div>
                    <div style="float: right;margin: 4px 0">
                        <el-button type="primary" size="small" @click="onSubmit">
                            查询
                        </el-button>
                        <el-button type="primary" size="small" @click="onResize">
                            重置
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>





      <tableList
        ref="tableRef"
          border
          :heightMin="155"
          :keySet="keySet"
          :autoHeight="true"
          :tableData="listDetails"
          :paginationShow="true"
          :pageNumber="pages.current"
          :pageSize="pages.size"
          :total="pages.total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"

          :radioSelect="true"
            @radioHandleCurrentChange="radioHandleCurrentChange"

      >
          <template #ykjhzfpbz="{ row }">
              <div >
                  {{ row.ykjhzfpbz == "N" ? "未开具" :"已开具" }}
              </div>
          </template>
          <template #chyydm="{ row }">
              <div >
                {{ chyyMap[row.chyydm] }}
              </div>
          </template>
      </tableList>

      <addRedConfigDialog
          ref="addRedConfigDialogRef"
          v-if="addRedConfigDialogShow"
          @redVoiceDailogCb="redVoiceDailogCb"
      ></addRedConfigDialog>


  </div>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import { pageConfirm } from '@/api/vmsHzqrdConfirm.js'
import addRedConfigDialog from './components/addRedConfigDialog.vue'
import { checkInfoAndRisk ,revokeConfirm} from '@/api/vmsHzqrdConfirm.js'
import {DictCode} from "@/utils/DictConstant";
import DictSelect from '@/views/invoiceTemplate/components/DictSelect/DictSelect.vue'

export default {
  name: 'redConfirmForm',
  data() {
      return {
        selectDate:["",""],
        selectDate2:["",""],
        hzqrxxztdmMap:{ //红字确认信息状态代码
            '01': '无需确认',
            '02': '销方录入待购方确认',
            '03': '购方录入待销方确认',
            '04': '购销双方已确认',
            '05': '作废（销方录入购方否认）',
            '06': '作废（购方录入销方否认）',
            '07': '作废（超72小时未确认）',
            '08': '作废（发起方撤销）',
            '09': '作废（确认后撤销）',
            '10': '作废（异常凭证）'
        },
            selectRow: null,
          addRedConfigDialogShow:false,
          searchParams:{
                "chyydm": "",
                "creatBy": "",
                "hzfpxxqrdbh": "",
                "hzqrdsqrqq": "",
                "hzqrdsqrqz": "",
                "hzqrxxztdm": "",
                "lrrqq": "",
                "lrrqz": "",
                "lzfphm": "",
                "lzfpkprqq": "",
                "lzfpkprqz": "",
            },

          pages:{
            current:1,
            size:10,
            total:0
          },
          chyyMap:{
                "01":"开票有误",
                "02":"销货退回",
                "03":"服务中止",
                "04":"销售折让",
            },
          listDetails: [],
          keySet: [
              {
                  label: '红字确认单编号',
                  englishName: 'hzfpxxqrdbh',
                  width: 180,
              },
              {
                  label: '红字确认单申请日期',
                  englishName: 'lrrq',
                  width: 200,
              },
              {
                  label: '红字确认单确认日期',
                  englishName: 'qrrq',
                  width: 'labelWidth',
              },
              {
                  label: '已开具红字发票标识',
                  englishName: 'ykjhzfpbz',
                  width: 'labelWidth',
                  isSlot: true,
                  slotName: 'ykjhzfpbz',
              },

              {
                  label: '红字确认单状态',
                  englishName: 'hzqrxxztdmText',
                  width: 180,
              },
              {
                  label: '红冲原因',
                  englishName: 'chyydm',
                  width: 180,
                  isSlot: true,
                  slotName: 'chyydm',
              },
              {
                  label: '红字发票号码',
                  englishName: 'hzfphm',
                  width: 'labelWidth',
              },

              {
                  label: '红字发票开具日期',
                  englishName: 'hzkprq',
                  width: 150,
              },

              {
                  label: '蓝字发票号码',
                  englishName: 'lzfphm',
                  width: '220',
              },
              {
                  label: '蓝字发票开具日期',
                  englishName: 'lzkprq',
                  width: 150,
              },

              {
                  label: '蓝字合计金额',
                  englishName: 'lzhjje',
                  width: 'labelWidth',
              },
              {
                  label: '蓝字合计税额',
                  englishName: 'lzhjse',
                  width: 'labelWidth',
              },

              {
                  label: '冲销金额',
                  englishName: 'hzcxje',
                  width: 'labelWidth',
              },
              {
                  label: '冲销税额',
                  englishName: 'hzcxse',
                  width: 'labelWidth',
              },
              {
                  label: '创建人',
                  englishName: 'creatBy',
                  width: '100',
              },
              {
                  label: '创建时间',
                  englishName: 'creatTime',
                  width: 200,
              },
          ],
      }
  },
  created() {
      this.getList()
  },
  computed:{
    DictCode() {
      return DictCode
    },
        dateWidth(){
            return this.$store.state.viewWidth > 1200
        }
    },
  methods: {
        radioHandleCurrentChange(row) {
            this.selectRow = row;
        },
      onResize() {
        this.selectDate = ['','']
        this.selectDate2 = ['','']
          this.searchParams = {
                "chyydm": "",
                "creatBy": "",
                "hzfpxxqrdbh": "",
                "hzqrdsqrqq": "",
                "hzqrdsqrqz": "",
                "hzqrxxztdm": "",
                "lrrqq": "",
                "lrrqz": "",
                "lzfphm": "",
                "lzfpkprqq": "",
                "lzfpkprqz": "",
            };
            this.pages = {
                current:1,
                size:10,
                total:0
            }
          this.getList()
      },
      onSubmit() {
            this.pages.current = 1;
          this.getList()
      },
      handleCurrentChange(val){
        this.pages.current = val;
        this.getList()
      },
      handleSizeChange(val){
        this.pages.size = val;
        this.getList()
      },
     async getList() {
        let params = {
                ...this.searchParams,
                "hzqrdsqrqq": this.selectDate[0],
                "hzqrdsqrqz": this.selectDate[1],
                "lzfpkprqq": this.selectDate2[0],
                "lzfpkprqz": this.selectDate2[1],
                "pageNo": this.pages.current,
                "pageSize": this.pages.size
            }
          let { data, code, message } = await pageConfirm(params)
          if (code == 200) {
              this.loading = false
              this.listDetails = data.records
              this.pages.total = data.total
              this.pages.current = data.current
              this.pages.size = data.size;
              try {
                            this.$refs.tableRef.$refs.table.setCurrentRow();
                        } catch (error) {
                            
                        }
          } 
      },
        async  uploadSelected() {
        let { data,code,message} =await  checkInfoAndRisk()
            if(code ==200){
                sessionStorage.setItem(
              'handleDetailInfo',
              JSON.stringify({
                  activeComNumber: '19',
                  titleInfo: '新增数电红字确认单申请',
                  searchParams: {},
                  busType:  'FLOW_HZQRDQR',
                  busId:  '',
              })
          )
          this.addRedConfigDialogShow = true;
          setTimeout(() => {
              this.$refs.addRedConfigDialogRef.show('ADD')
          }, 50)
            }else{
                return;
            }
      },
      redVoiceDailogCb(val){
          this.addRedConfigDialogShow = val || false;
          this.getList()
      },

      revokeRedInvoice() {
        console.log(this.selectRow);
          if (this.selectRow === null) {
              this.$message.warning('请先勾选一条数据！')
          } else {
              this.$confirm( `您确定要撤回所选择的数据吗？`,'撤销确认').then(data=>{
                  revokeConfirm(this.selectRow.id).then(({data,code,message})=>{
                        if(code==200){
                            this.$message.success(message)
                            this.getList();
                        }
                    })
              },err=>{
              })
          }
      },
  },
  components: {
    DictSelect,
      tableList,
      addRedConfigDialog,
  },
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;

  .head {
      display: flex;
      height: 18px;
      align-items: center;
      margin-bottom: 4px;
      margin-top: 4px;

      .colCLas {
          width: 4px;
          height: 100%;
          background-color: $allBg;
          margin-right: 12px;
      }

      .info {
          height: 100%;
          display: flex;
          align-items: center;
      }
  }

  .redBG {
      background-color: red;
      border-radius: 10px;
      text-align: center;
      line-height: 150%;
  }

  .bg {
      text-align: center;
  }
}

.gt1200{
    ::v-deep .el-date-editor--datetimerange.el-input__inner{
        width: 100%;
        max-width: 600px;
    }
}
.lt1200{
    ::v-deep .el-date-editor--datetimerange.el-input__inner{
        width: 300px;
    }
    ::v-deep .el-input.el-date-editor--daterange, .el-input__inner.el-date-editor--daterange, .el-input.el-date-editor--timerange, .el-input__inner.el-date-editor--timerange{
        width: 300px;
    }
}
::v-deep .el-form-item--small.el-form-item{
// margin-bottom: 8px;
}
</style>
